import React, { Component } from 'react'

export default class App extends Component {
    state = {
        list: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    }
    pushDetail = (id) => {
        // 路由传参
        // this.props.history.push('/detail?id=' + id)

        // params 刷新页面会丢失
        // this.props.history.push({
        //     pathname: "/detail",
        //     params: {
        //         id
        //     }
        // })

        // state  刷新页面不会丢失
        // this.props.history.push({
        //     pathname: "/detail",
        //     state: {
        //         id
        //     }
        // })

        this.props.history.push('/detail/' + id)
    }
    render() {
        const { list } = this.state
        return (
            <div>
                <ul>
                    { list.map((item, index) => {
                        return <li onClick = { () => {
                            this.pushDetail(item)
                        } } key = { index }>
                            我是第{ item }条数据
                        </li>
                    })}
                </ul>
            </div>
        )
    }
}
